<template>
    <div class="container">
        <Navbar title="订单评论" left-text="返回" left-arrow @click-left="goBack">
        </Navbar>

        <van-card v-for="(item, index) in OrderProduct" :key="item.id" :thumb="item.product.cover_cdn">
            <template #title>
                <p>商品名: {{ item.product.name }} </p>
            </template>
            <template #desc>
                <p>下单时间： {{ Order.createtime_text }} </p>
            </template>
            <template #price>
                <div class="flex">
                    <div style="display: flex;">单价：<h3>￥ {{ item.price }} </h3>
                    </div>
                    <span>x {{ item.nums }}</span>
                </div>
            </template>
            <template #footer>
                <div>
                    <van-button v-if="item.rate == 0" type="success" size="mini" @click="comment(item.id)">立即评价
                    </van-button>
                    <van-button v-else size="mini" type="primary" color="#ffdc00">已评价</van-button>
                </div>
            </template>
        </van-card>

        <!-- 评论弹窗 -->
        <van-popup style="background: #f2f2f2;" v-model:show="showComment" round closeable close-icon="close"
            position="bottom" :style="{ height: '80%' }">
            <template #default>
                <div class="popup">
                    <van-cell title="商品订单评论" />
                    <van-card :thumb="tempPro.product.cover_cdn" class="shop_card">
                        <template #title>
                            <p>商品名: {{ tempPro.product.name }} </p>
                        </template>
                        <template #price>
                            <div class="flex">
                                <div style="display: flex;">单价：<h3>￥ {{ tempPro.price }} </h3>
                                </div>
                                <span>x {{ tempPro.nums }}</span>
                            </div>
                        </template>
                    </van-card>

                    <van-form @submit="onSubmit">
                        <van-field center clearable name="rate" label="评分"
                            :rules="[{ required: true, message: '请评分' }]">
                            <template #input>
                                <van-rate v-model="info.rate" :size="25" color="#ffd21e" void-icon="star"
                                    void-color="#eee" />
                            </template>
                        </van-field>

                        <van-field v-model="info.comment" name="message" rows="2" autosize label="评论（选填）"
                            type="textarea" maxlength="50" placeholder="请输入评论" show-word-limit />

                        <van-field name="fileList" label="修改背景" label-width="4em" label-align="right">
                            <template #input>
                                <van-uploader v-model="fileList" multiple />
                            </template>
                        </van-field>
                        <div style="margin: 16px">
                            <van-button round block type="primary" native-type="submit">
                                提交
                            </van-button>
                        </div>
                    </van-form>

                </div>
            </template>
        </van-popup>
    </div>
</template>
<script>
import Navbar from '../Navbar.vue'

export default {
    name: 'Comments',
    data() {
        return {
            orderid: this.$route.query.orderid ? this.$route.query.orderid : 0,
            OrderProduct: [],
            Order: [],
            userid: this.$cookies.get('ShopUser').id,
            showComment: false,
            tempPro: {},
            info: {},
            fileList: [
            ],
        }
    },
    methods: {
        async initOrderInfo() {
            let res = await this.$api.initOrderInfo({ orderid: this.orderid });
            console.log(res.data);
            if (res.code === 1) {
                this.Order = res.data.Order
                this.OrderProduct = res.data.OrderProduct
            } else {
                console.log(res.msg);
            }
        },
        goBack() {
            this.$router.push('/user/order/orders');
        },
        comment(pid) {
            this.showComment = true

            this.OrderProduct.forEach(element => {
                if (element.id == pid) {
                    this.tempPro = element
                }
            });
        },
        async onSubmit(formData) {
            if (this.info.rate) formData.rate = this.info.rate;

            if (this.info.comment) formData.comment = this.info.comment;

            if (this.tempPro.id) formData.id = this.tempPro.id;

            // if (this.fileList) formData.proimg = this.fileList[0].file;

            if (this.fileList.length > 0) {
                this.fileList.forEach((item, index) => {
                    let name = 'proimg_' + index
                    formData[name] = item.file
                });
            }

            console.log(formData);
            let res = await this.$api.comment(formData);

            if (res.code === 1) {
                this.$notify({
                    type: "success",
                    message: res.msg,
                    duration: 1500,
                    onClose: () => {
                        this.showComment = false
                        this.info = {}
                        this.fileList = []

                        if (res.data.status == 4) {
                            this.$router.push('/user/order/orders');
                        }
                        // this.info = res.data
                        this.initOrderInfo()
                    },
                });
            } else {
                this.$notify({
                    type: "danger",
                    message: res.msg,
                    duration: 1500,
                    onClose: () => {
                        return false;
                    },
                });
            }
        },
    },
    created() {
        this.initOrderInfo()
    },
    components: {
        Navbar,
    }
};
</script>

<style scoped>
:deep(.van-field__button) {
    padding-left: 0 !important;
    position: absolute;
    left: 0;
}

.shop_card {
    margin-bottom: 1.875rem;
}

:deep(.van-card) {
    margin-top: 0;
    background-color: #fff;
}

.popup {
    margin-top: 2.9rem;
}
</style>